import React, {useState, useEffect} from 'react';
import {TabBar, Toast, NavBar, Icon, Result} from 'antd-mobile';
import {PayApply, QueryApplyPay, PayVip, QueryPayVip, pay} from "@/api/wx/wxpay.js";
import {R} from "@/assets/js/dict.js"
import {detailsInfo} from "@/api/parent/parent.js";

import wxpay from "@/assets/svg/wxpay.svg"
import prePay from "@/assets/svg/prePay.svg"

import './pay.scss';

const myImg = src => <img src={src} className="spe am-icon am-icon-md" alt=""/>;

/**
 * 支付会员费
 * @param props
 * @returns {*}
 * @constructor
 */
function PayOfVip(props) {
    console.log("Pay---->", props);
    let [userInfo] = useState(() => {
        let d = sessionStorage.getItem("userInfo");
        if (!!d) {
            return JSON.parse(d);
        } else {
            Toast.offline("未能获取用户信息");
            return {};
        }
    });

    let [info, setInfo] = useState({
        flag: false, //是否已经支付的标识
        success: false,
        message: '',
    });


    function payHandle() {
        let params = {parent_id: userInfo.id};
        /**
         * 微信支付的测试代码
         */
        pay(() => PayVip(params), (p) => QueryPayVip(p, (res) => {
            let money = (p.total_fee || "40000")/100;
            Toast.hide();
            if (res.code === R.success) {

                //更新页面信息
                setInfo({flag: true, success: true, message: res[R.msg] || "支付成功，恭喜您成为会员"});

                //更新用户信息
                detailsInfo({parent_id: userInfo.id}, (res) => {
                    if (res[R.code] === R.success) {
                        let data = res[R.data];
                        let info = {
                            username: data.name,
                            id: data.id,
                            type: data.role,
                            is_vip: data.is_vip,
                            vip_limit: data.vip_limit
                        };
                        console.log("detailsInfo-->", info);
                        sessionStorage.setItem("userInfo", JSON.stringify(info));
                    }
                });
            } else {
                setInfo({flag: true, success: false, message: res[R.msg] || `会员费${money}元，支付失败`});
            }
        }));
    }

    useEffect(() => {
        let money = 400;
        setInfo({ flag: false, success: true, message: `平台为保证服务质量，面对家长实行会员制度，会员费用标准为${money}元/年，会员期间平台将不限次数地为您提供家教介绍服务`});
    }, []);

    function show() {
        if (!info.flag) {
            return (<Result
                buttonText="点击支付"
                img={myImg(prePay)}
                title="微信支付"
                message={info.message}
                buttonType="primary"
                onButtonClick={payHandle}
            />);
        } else {

            if (info.success) {
                return (<Result
                    buttonText="确定"
                    img={myImg(wxpay)}
                    title="微信支付结果"
                    message={info.message}
                    buttonType="primary"
                    onButtonClick={() => props.history.goBack()}
                />);
            } else {
                return (<Result
                    buttonText="确定"
                    img={<Icon type="cross-circle-o" className="spe" style={{fill: '#F13642'}}/>}
                    title="微信支付结果"
                    message={info.message}
                    buttonType="primary"
                    onButtonClick={() => props.history.goBack()}
                />);
            }
        }
    }


    return (
        <div className="main">
            <div className="page-title">
                <NavBar
                    mode="light"
                    icon={<Icon type="left"/>}
                    onLeftClick={() => props.history.goBack()}
                >支付会员费</NavBar>
            </div>
            {show()}
        </div>
    );
}

export default PayOfVip;